<template>
  <div id="Z">
    <div id="t">
      <img src="../../../assets/img/yzk-img/user.png" alt="" />
      <ul>
        <li>
          <span>5</span>
          <p>获赞</p>
        </li>
        <li>
          <span>20</span>
          <p>关注</p>
        </li>
        <li>
          <span>1100</span>
          <p>粉丝</p>
        </li>
      </ul>
      <input type="button" value="编辑资料" />
    </div>

    <div id="b">
      <h4>用户:{{ username }}</h4>

      <p>您还没有填写个人简介,点击添加</p>
      <van-notice-bar
        left-icon="volume-o"
        text="请尽快完善个人信息,补充个人资料"
      />
    </div>
  </div>
</template>

<script>
// import axios from "axios";
export default {
  name: "Ziliao",
  data() {
    return {
      username:"",
      userpass:"",
    };
  },


  mounted() {
      let data1 = localStorage.getItem("username");
      this.username = data1;
  },

  
};
</script>

<style scoped>
#Z {
  width: 100%;
  height: 2.28rem;
}
#t {
  width: 100%;
  height: 1.47rem;
  background-color: #fff;
  text-align: left;
}
#t img {
  width: 1rem;
  height: 1rem;
  margin-top: 0.35rem;
  margin-left: 0.16rem;
  margin-right: 0.22rem;
  float: left;
}
#t ul {
  width: 2.57rem;
  height: 0.55rem;
  display: flex;
  justify-content: space-between;
  margin-top: 0.35rem;
  float: left;
  margin-bottom: 0.05rem;
}
#t li {
  text-align: center;
}
#t input {
  width: 2.61rem;
  height: 0.4rem;
  border: 1px solid pink;
  border-radius: 0.2rem;
  background-color: #fff;
  color: #fa0071;
  font-size: 0.16rem;
}
#b {
  width: 100%;
  height: 0.82rem;
  overflow: hidden;
}
#b h4 {
  text-align: left;
  padding-left: 0.2rem;
  box-sizing: border-box;
  margin-bottom: 0.05rem;
}
#b p {
  text-align: left;
  font-size: 0.11rem;
  color: gray;
  padding-left: 0.2rem;
}
</style>